/* Global transition */
// See https://vuejs.org/v2/guide/transitions.html for detail

// fade
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.28s;
}

.fade-enter,
.fade-leave-active {
  opacity: 0;
}

// fade-login
.fade-login-enter-active {
  transition: opacity .28s;
}

.fade-login-enter {
  opacity: 0;
}

// fade-transform
.fade-transform-leave-active,
.fade-transform-enter-active {
  transition: all 0.5s;
}

.fade-transform-enter {
  opacity: 0;
  transform: translateX(-30px);
}

.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

// breadcrumb
.breadcrumb-enter-active,
.breadcrumb-leave-active {
  transition: all .5s;
}

.breadcrumb-enter,
.breadcrumb-leave-active {
  opacity: 0;
  transform: translateX(20px);
}

.breadcrumb-move {
  transition: all .5s;
}

.breadcrumb-leave-active {
  position: absolute;
}


@keyframes bg-color {

  0% {
    background-position: -200px 0
  }

  100% {
    background-position: 200px 0
  }

}

@keyframes glow {
  0% {
    -webkit-box-shadow: 0 0 12px rgba(72, 106, 170, 0.5);
    border-color: rgba(12, 14, 32, 0.5);
  }

  100% {
    /*transform:translateY(-10px);*/
    -webkit-box-shadow: 0 0 12px rgba(72, 106, 170, 1.0), 0 0 50px rgb(0, 140, 255);
    border-color: rgba(12, 14, 32, 1.0);
  }
}

@keyframes dashboardGuideData {

  0%,
  48.39% {
    transform: rotateX(0deg) rotateZ(0deg);
  }

  51.61%,
  100% {
    transform: rotateX(90deg) rotateZ(0deg);
  }

}